<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片转 ICO</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
      }
      .upload-container {
        margin-bottom: 20px;
      }
      .preview-container {
        margin-bottom: 20px;
      }
      .download-container {
        margin-top: 20px;
      }
      button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
      }
      button:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <h1>图片转 ICO</h1>
    <div class="upload-container">
      <input type="file" id="image-input" accept="image/*" />
    </div>
    <div class="preview-container">
      <img id="image-preview" src="" alt="预览" style="max-width: 300px; display: none" />
    </div>
    <div class="size-container">
      <label for="size-select">选择尺寸：</label>
      <select id="size-select">
        <option value="16">16x16</option>
        <option value="32">32x32</option>
        <option value="64">64x64</option>
        <option value="128">128x218</option>
        <option value="256">256x256</option>
      </select>
    </div>
    <div class="download-container">
      <button id="convert-btn">转换为 ICO 并下载</button>
    </div>
    <script>
      document.getElementById("image-input").addEventListener("change", function (event) {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
              const previewImg = document.getElementById("image-preview");
              previewImg.src = e.target.result;
              previewImg.style.display = "block";
            };
            img.src = e.target.result;
          };
          reader.readAsDataURL(file);
        }
      });

      document.getElementById("convert-btn").addEventListener("click", function () {
        const previewImg = document.getElementById("image-preview");
        const size = parseInt(document.getElementById("size-select").value);
        if (previewImg.src && previewImg.src !== "") {
          const canvas = document.createElement("canvas");
          canvas.width = size;
          canvas.height = size;
          const ctx = canvas.getContext("2d");
          const img = new Image();
          img.onload = function () {
            ctx.drawImage(img, 0, 0, size, size);
            const dataURL = canvas.toDataURL("image/x-icon");
            const downloadLink = document.createElement("a");
            downloadLink.href = dataURL;
            downloadLink.download = "favicon.ico";
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
          };
          img.src = previewImg.src;
        } else {
          alert("请先选择一张图片");
        }
      });
    </script>
  </body>
</html>
